<template>
  <div class="system-user-container layout-padding">
    <el-page-header @back="router.back()">
      <template #content> {{ route.query.name }}</template>
    </el-page-header>
    <el-card shadow="hover" class="layout-padding-auto" style="margin-top: 16px">
      <el-table :data="tableData.list" v-loading="loading" row-key="id" border style="width: 100%">
        <el-table-column label="微信名" prop="nick_name" width="200" fixed="left"/>
        <el-table-column label="手机号" prop="mobile" width="150" fixed="left"/>
        <el-table-column prop="uid" label="uid" width="300"></el-table-column>
        <el-table-column prop="distribution_ratio" label="分销比例" >
          <template #default="{ row }">
            <el-input-number v-model="row.ratio" @blur="updateRatio(row)"/>(%)
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { readActivityDistributions,updateActivityDistribution } from '/@/api/activity-distribution';
import { useTable } from '/@/hooks/use-table';
import { useRouter } from 'vue-router';
import { Activity } from '/@/models/activity';
import { useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const { tableData, loading } = useTable<Activity>(({ page, pageSize }) =>
  readActivityDistributions({ activityId: route.query.activity_id as string, page, pageSize }).then(({ data }) => {
    return {
      total: data?.total,
      list: data?.list
    };
  })
);

const updateRatio = async (data: any) => {
  await updateActivityDistribution(data);
};

</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}

.table-tool-bar {
  display: flex;
  justify-content: space-between;
}
</style>

